/*------------------------------------------------------------------------------------------------------*/
/*	Function to display file name for file file input
/*------------------------------------------------------------------------------------------------------*/
(function($){
$.fn.fileName = function() {
	var $this = $(this),
	$val = $this.val(),
	valArray = $val.split('\\'),
	newVal = valArray[valArray.length-1],
	$button = $this.siblings('.button');
	if(newVal !== '') {
		$button.text(newVal);
  	}
};
})(jQuery);

/*------------------------------------------------------------------------------------------------------*/


$().ready(function() {

/*------------------------------------------------------------------------------------------------------*/
/*	(Section Style Switcher) Changes CSS files
/*------------------------------------------------------------------------------------------------------*/
	$("#style-switcher li a").click(function() {
		$("link.stylesheet").attr("href",$(this).attr('rel'));
		return false;
	});
	
/*------------------------------------------------------------------------------------------------------*/
/*	(Section A) Squares Page with drag and drop functionality using Jquery UI
/*------------------------------------------------------------------------------------------------------*/
		//toggle animation of squares on hover
		$('.squares-group').hover(
			function(){
				$(this).find('ul').css('visibility','visible');
				$(this).find('.category').animate({opacity:0.9, width: '86',  height:'86px', marginTop:'35px', marginLeft:'35' });
			},
			function(){
				$(this).find('.category').animate({opacity:1.0, width: '138',  height:'138px', marginTop:'9px', marginLeft:'10' });
				$(this).find('ul').css('visibility','hidden');
			}
		);
		//toggle tooltip of list items in squares-all
		$('.squares-all li').hover (
			function(){
				var $group = $(this).attr('title');
				if ($group != '') {
					$(this).append('<p class=tooltip>' + $group + '</p>');
				}
				else {
					$(this).append('<p class=tooltip>Not in your squares.</p>');
				}
			},
			function(){
				$(this).find('.tooltip').hide();
			}
		);
		//toggle tooltip of list items in squares-group
		$('.squares-group li').hover (
			function(){
				var $item = $(this).find('img').attr('title');
				if ($item != null) {
					$(this).append('<p class=tooltip>' + $item + '</p>');
				}
			},
			function(){
				$(this).find('.tooltip').hide();
			}
		);		
		//set the elements that can be dragged to the squares
		$('.squares-all li').draggable({
			revert: 'invalid', // when not dropped, the item will revert back to its initial position
			containment:  '.squares', // stick to demo-frame if present
			helper: 'clone',
			cursor: 'move'
		});
		
		//set the elements that can be dragged ou of squares
		$('.squares-group li').draggable({
			revert: 'invalid', // when not dropped, the item will revert back to its initial position
			containment:  '.squares', // stick to demo-frame if present
			helper: 'clone',
			cursor: 'move'
		});
		
		//set the elements that can be dropped on
		$('.squares-group').droppable({
			accept: '.squares-all li',
			drop: function( event, ui ) {
				addToGroup( ui.draggable, $(this)); //ui.draggable is current draggable element and $(this) is current droppable element				
			}
		});

		//set the elements that can be dropped on to delete items out of a square
		$('.squares').droppable({
			accept: '.filled',
			drop: function( event, ui ) {
				removeFromGroup( ui.draggable); //ui.draggable is current draggable element and $(this) is current droppable element				
			}
		});
		
		//function to add item to a group
		function addToGroup( $item, $group ) {
			$item.fadeOut(function() {
				var $image = $item.find( 'img' ).attr('src'), //item image url
					$name = $item.find('.name').html(), //html value of class name
					$itemid = $item.attr('title'), //title value of item
					$groupid = $group.attr('id'), //id value of group
					$count = $group.find('.count'), //find class count
					$countnum = parseInt($count.html()); //get current count of items in group
				//if item is not in a group
				if ($itemid == '') {
					$item.attr('title', $groupid).addClass('insquare'); //set item's title value of group's id and add class insquare
					$group.find('li:not(.filled, .empty):first').html('<img src='+$image+ ' title=' +$name + ' width=26 height=26 />').addClass('filled'); //place image inside square
					$countnum = ($countnum+1); //increment count of items in square
					$count.html($countnum); //show current count
					/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
					/* Add more actions here such as update your database via ajax or form when an item is dropped
					/*-----------------------------------------------------------------------------------------------------------------------------------------------*/					
				}
				else {
					//show error message that the item is already in a square
					$('#action-message').slideDown({opacity:0.8, duration:1000, easing:'easeOutBounce'}).html($name + ' is already in your square of  ' + $itemid+ '.')
					.delay(1500).fadeOut();
				}
			});
			$item.fadeIn();
		}
		
		//function to remove item from a group
		function removeFromGroup( $item ) {
			$item.fadeOut(function() {
				var $count = $item.parent().parent().find('.count'), //find class count
				$name = $item.find('img').attr('title'), //get value of item's img title
				$countnum = parseInt($count.html());  //get current count of items in group
				
				$item.removeClass('filled').html(''); //remove item's class filled, remove item's html value
				$countnum = ($countnum-1); //decrement count of items in square
				$count.html($countnum); //show current count

				//find associated item in list of all items and delete the title attribute and remove class insquare
				$(".squares-all li div:contains('" + $name + "')").parent().attr('title','').removeClass('insquare');
				
				/*----------------------------------------------------------------------------------------------------------------------------------------------*/
				/* Add more actions here such as update your database or form when an item is taken out of square
				/*-----------------------------------------------------------------------------------------------------------------------------------------------*/					
			});
			$item.fadeIn();
		}

/*------------------------------------------------------------------------------------------------------*/
/*	Section(B) Scroll to top of page using jquery.ui.totop.js
/*------------------------------------------------------------------------------------------------------*/
	
	$().UItoTop({ easingType: 'easeOutQuart' });


/*------------------------------------------------------------------------------------------------------*/
/*	Section (C) Page width and text size control
/*------------------------------------------------------------------------------------------------------*/
	$('#page-width-control').toggle(function() {
			$('.global-shell, #global-navigation, #global-header, #global-footer').animate({width: '100%'}, { duration: 'slow', easing: 'easeOutElastic' });
			$(this).html('Fixed Width');
			},function() {
			$('.global-shell, #global-navigation, #global-header, #global-footer').animate({width: '1020px'}, { duration: 'slow', easing: 'easeOutElastic' });
			$(this).html('Fluid Width');
	});

	$('#text-control').toggle(function() {
			$('body').css('font-size', '1.1em');
			$(this).html('Normal Text');
			},function() {
			$('body').css('font-size', '1em');
			$(this).html('Larget Text');
	});
	
/*------------------------------------------------------------------------------------------------------*/
/*	(Section D) Show/hide search button on focus/blur
/*------------------------------------------------------------------------------------------------------*/
	$('.search-field').focus(function() {
		$('.search-btn').show();
	})
	.blur(function() {
		if($(this).val() == ''){
			$('.search-btn').hide();
		}
	});
	

/*------------------------------------------------------------------------------------------------------*/
/*	(Section E) Data table using jquery.datatables.min.js (www.datatables.net)
/*------------------------------------------------------------------------------------------------------*/
	$('.data-table').dataTable({
		'sPaginationType': 'full_numbers'
	});
	$('.data-table2').dataTable( {
		"bFilter": false,
		"bInfo": false,
		"bPaginate":false
 	});
 	//toggle check all checkboxes
 	$('.check-all').toggle(
 		function() {
 			$(this).parent().parent().parent().find('input[type=checkbox]').attr('checked', 'checked');
 		},
 		function() {
 			$(this).parent().parent().parent().find('input[type=checkbox]').attr('checked', '');
 		}
 	);


/*------------------------------------------------------------------------------------------------------*/
/*	(Section F) Charts and graphs using jquery.visualize.js (www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/)
/*------------------------------------------------------------------------------------------------------*/
// Dashboard line graph
	$('.table1').visualize({
		type:'line',
		interaction:true,
		lineDots: 'double',
		tooltip:true,
		lineWeight:9,
		height:'410',
		colors: ['#9acad8','#44acee','#777777']
	});
// Dashboard pie chart
	$('.table2').visualize({
		type:'pie',
		interaction:true,
		lineDots: 'double',
		tooltip:true,
		height:'410',
		colors: ['#9acad8','#44acee','#777777']
	});
// Dashboard area graph
	$('.table3').visualize({
		type:'area',
		lineDots: 'double',
		lineWeight:6,
		height:'410',
		colors: ['#9acad8','#44acee','#777777']
	});
// Dashboard bar graph
	$('.table4').visualize({
		type:'bar',
		height:'410',
		colors: ['#9acad8','#44acee','#777777']
	});
// Chart page  pie chart
	$('.table5').visualize({
		type:'pie',
		interaction:true,
		width:'380',
		lineDots: 'double',
		tooltip:true,
		height:'250',
		colors: ['#3299da','#a3d9e9','#555555']
	});
// Chart page line graph
	$('.table6').visualize({
		type:'bar',
		interaction:true,
		width:'380',
		height:'250',
		tooltip:true,
		colors: ['#3299da','#a3d9e9','#555555']
	});
	$('table.chart').css('display','none'); //hide table for charts and graphs
	
/*------------------------------------------------------------------------------------------------------*/
/*	(Section G) Tabs using JQuery UI (www.jqueryui.com)
/*------------------------------------------------------------------------------------------------------*/
  	$('.tabbing').tabs( { fx: { opacity: 'toggle', duration:'fast' } } );
  	$('.tabbing').tabs( { fx: { opacity: 'toggle', duration:'fast' } } );
  	
/*------------------------------------------------------------------------------------------------------*/
/*	(Section H) Accordion using JQuery UI (www.jqueryui.com)
/*------------------------------------------------------------------------------------------------------*/
	$('.accordion').accordion();

/*------------------------------------------------------------------------------------------------------*/
/*	(Section I) Dialog using JQuery UI (www.jqueryui.com)
/*------------------------------------------------------------------------------------------------------*/
 	/*in form page*/
	$( '#dialog' ).dialog({
		autoOpen: false,
		show: 'fade',
		hide: 'fade',
		modal: 'true',
		buttons: {
			'Delete all items': function() {
				$( this ).dialog( 'close' );
			},
			Cancel: function() {
				$( this ).dialog( 'close' );
			}
		}
	});
	$( '.opener' ).button().click(function() {
		$( '#dialog' ).dialog( 'open' );
		return false;
	});

	/*in gallery page*/
	$( '#delete-dialog' ).dialog({
		autoOpen: false,
		show: 'fade',
		hide: 'fade',
		modal: 'true',
		buttons: {
			'Delete': function() {
				$( this ).dialog( 'close' );
			},
			Cancel: function() {
				$( this ).dialog( 'close' );
			}
		}
	});
	$( '.delete' ).click(function() {
		$( '#delete-dialog' ).dialog( 'open' );
		return false;
	}); 	

/*------------------------------------------------------------------------------------------------------*/
/*	(Section J) Dropdown menus using jquery.potato.menu.min.js (http://labs.makotokw.com/en/jquery/ui_potato_menu)
/*------------------------------------------------------------------------------------------------------*/
	/*black style*/
	$('#control').ptMenu();
	
	/*light gray style*/
	$('#menu').ptMenu();

/*------------------------------------------------------------------------------------------------------*/
/*	Section (K) Form elements
/*------------------------------------------------------------------------------------------------------*/
	
	// clear input on focus
	$('.clear-focus').focus(function(){
		if($(this).val() == this.defaultValue){
			$(this).val('');
		}
	});
	// if field is empty afterward, add text again
	$('.clear-focus').blur(function(){
		if($(this).val() == ''){
			$(this).val(this.defaultValue);
		}
	});

  	
	/*custom file input using function fileName (plugin at top of page)*/
	$('.choose-file').bind('change focus click', function() {$(this).fileName()});
	
	/*calendar pop-up using JQuery UI*/
	$( '.datepicker' ).datepicker({
		dateFormat: "dd/mm/yy"
	});
	
	/* a with button */
	$("a.button").button();
	
	/*checkbox button using JQuery UI except checkboxes with class "normal" */
	$('input[type=checkbox]:not(.normal)').button();
	
	/*button sets using JQuery UI*/
	$( '.check' ).buttonset();
	$( '.radio' ).buttonset();

	/*select menu using jquery-ui.selectmenu.js (http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/)*/
	$('select').selectmenu({style:'dropdown'});

	/*submit button using JQuery UI except button class '.power'*/
  	$( 'input[type=submit], input[type=reset]').not('.power').button();
	
	/*basic horizontal slider using JQuery UI*/
	$( '#slider-min' ).slider({
		range: 'min',
		value: 1,
		min: 1,
		max: 700,
		slide: function( event, ui ) {
			$( '#slider-min-value' ).val( '$' + ui.value );
		}
	});
	/*horizontal slider range using JQuery UI*/
	$( '#slider-min-value' ).val( '$' + $( '#slider-min' ).slider( 'value' ) );
	$( '#slider-range' ).slider({
		range: true,
		min: 0,
		max: 500,
		values: [ 0, 500 ],
		slide: function( event, ui ) {
			$( '#slider-range-value').val( '$' + ui.values[ 0 ] + ' - $' + ui.values[ 1 ] );
		}
	});
	$( '#slider-range-value' ).val( '$' + $( '#slider-range' ).slider( 'values', 0 ) +
		' - $' + $( '#slider-range' ).slider( 'values', 1 ) );
	
/*------------------------------------------------------------------------------------------------------*/
/*	(Section L) Gallery Page
/*------------------------------------------------------------------------------------------------------*/
/*Stack images using jquery.masonry.min.js (http://masonry.desandro.com)*/
	$('.gallery').masonry();

/*Show zoom or trash icons on hover of gallery images*/
	$('.gallery li').hover(function(){
		$(this).children('.action').fadeToggle();
	});
	
/*Display lightbox gallery on click of selector using jquery.lightbox.min.js (www.leandrovieira.com/projects/jquery/lightbox)*/
	$('a.zoom').lightBox({containerResizeSpeed:600});
	
/*------------------------------------------------------------------------------------------------------*/
/*	(Section M) Access Page
/*------------------------------------------------------------------------------------------------------*/  	
  	
  	/*Tabs*/
  	$('#access-body').tabs( { fx: { opacity: 'toggle', height:'toggle', duration:'slow' } } );

	$('textarea.markItUpEditor').markItUp(mySettings);

	// And you can add/remove markItUp! whenever you want
	// $(textarea).markItUpRemove();
	$('.textarea-switcher a').click(function() {
		if ($('textarea.markItUpEditor').length === 1) {
 			$('textarea').markItUpRemove();
			$(this).addClass('radio-link-empty').removeClass('radio-link-selected');
		} else {
			$('textarea').markItUp(mySettings);
			$(this).removeClass('radio-link-empty').addClass('radio-link-selected');
		}
 		return false;
	});

/*------------------------------------------------------------------------------------------------------*/
/*	(Section N) File Explorer
/*------------------------------------------------------------------------------------------------------*/  	
	$('#file-tree').fileTree({ root: 'dummy-files/', script: 'jqueryFileTree.php' }, function(file) {
		alert(file);
	});

/*------------------------------------------------------------------------------------------------------*/
/*	(Section O) Simple Tool Tip
/*------------------------------------------------------------------------------------------------------*/  	

	$('.tool-tip').hover(
	function() {
		this.tip = this.title;
		$(this).append('<div class=tool-tip-box><p>'+this.tip+'</p></div>');
		$('.tool-tip-box').fadeIn(600);
		this.title = '';
	},
	function() {
		$('.tool-tip-box').fadeOut(300);
		$(this).children('.tool-tip-box').remove();
		this.title = this.tip;
		}
	);

/*------------------------------------------------------------------------------------------------------*/
/*	(Section P) Dashboard row sizer and background color changer
/*------------------------------------------------------------------------------------------------------*/  	
	$('.resize').hover(
		function() {
			$(this).animate({backgroundColor:'#ccc', duration:1000});
		},
		function() {
			$(this).animate({backgroundColor:'#fff', duration:700});
		}
	);
	$('.resize').toggle(
		function() {
			$(this).parent().parent().find('.global-shell').slideUp({duration:1000, easing:'easeInOutExpo'});
			$(this).css('background', 'url(img/control-banner-maximize.png)')
		},
		function() {
			$(this).parent().parent().find('.global-shell').slideDown({duration:1000, easing:'easeInOutExpo'});
			$(this).css('background', 'url(img/control-banner-minimize.png)')
		}
	);
	$('.colors').miniColors({
		change: function(hex, rgb) {
			$(this).parent().parent().parent().css('background-color', hex);
		}
	});
/*------------------------------------------------------------------------------------------------------*/
/*	(Section Q) Widget Sorter in Dashboard
/*------------------------------------------------------------------------------------------------------*/  	
	$( '.sort' ).sortable({
		revert: true,
		cursor: 'move',
		axis: 'x'
	});
});